<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/*控制字体：控制字体家族  */
			{
				/* font-family指定字体 */
				font-family: 微软雅黑,sans-serif;
				/* 用户电脑端可能不存在制定字体，按照顺序再制定一个字体
				 sans-serif 无衬线字体，理解：黑体*/
				 /* 字体尺寸属性 */
				 /* 字体尺寸属性：px单位:绝对值
				                em单位：相对与父元素字体大小 倍数【移动端】 */
				 font-size: 1.5em;
				 /* 字体加粗属性:属性值【数值整数范围：100—900】400等于normal bold等于900
				                属性值【英文：normal bold】*/
				 font-weight:bold ;
				 /* 字体样式属性 */
				 font-style: italic;
				 /* 文本转换属性：uppercase大写lowercase小写 */
				 text-transform: uppercase;
				 /* 首行缩进属性 */
				 text-indent: 200px;
			}
			/* 2.控制文本属性 */
			h1+p{
				bor der: 1px solid red;
				/* text-algin文本对齐属性：left/right/center【具备空间】
				justify 【文本内容足够,两端对齐】*/
				text-align:justify;
				/* line-height行高属性：数值px 主要功能：文本的垂直居中 高度与行高一致*/
				height: 40px;
				line-height: 40px;
				/* letter-spacing: 数值px设置字符间距 */
				letter-spacing:1px ;
				/* word-spacing:数值px设置单词间距 */
				word-spacing: 2px;
				}
				/* 3.文本装饰效果 */
				div a{
					border:1px solid #ccc;
					padding: 10px;
					margin-left: 4px;
				}
				div a.current{/*加权重*/
					border:0px;
					color:#000;
					/* test-decoration超文本装饰属性:none 去掉下划线 
					                                 underline默认 自带下划线
													 line-throgh 删除线*/
					text-decoration: none;
				}
				div p{
					/* 文本阴影属性：【阴影三种】：过滤：下阴影 文本阴影 盒子阴影
					           X Y 模糊程度 颜色*/
							   text-shadow: 5px 5px 10px #aa55ff;
				}
				/*4.处理文本换行属性 */
				div>span{
					/* white-space文本换行属性：nowrap 不换行
					                         pre 保留空格与换行
											 normal 默认， 空格合并，自动换行，回车不换行*/
					border:1px solid red;
					white-space: nowrap;
					white-space: pre;
					white-space: normal;
				}   
				
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：页面上文本或者字体
		 4种用途1.控制字体：font-family font-size font-weight
		        2.控制文本布局：text-align lin-height letter-spacing
				3.控制文本修饰效果：text-decoratioin text-shadow
				4.处理文本溢出换行：overflow white-space--->
				<h1>控制字体属性：font-family font-size font-weight</h1>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus accusamus, deserunt incidunt illum doloribus dignissimos obcaecati, saepe laborum nesciunt ad nihil officiis, tempora fugit dolor repellat? Consequuntur animi dolor sint!
			<h1>控制文本布局：text-algin line-height</h1>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci omnis quibusdam esse animi exercitationem iure officia consectetur laborum! Repudiandae vel totam rem sunt optio omnis harum earum dicta doloribus. Minima.</p>
				<h1>文本装饰</h1>
				<div>
				<a href="#" class="current">1</a>
				<a href="#">2</a>
				<a href="#">3</a>
				<a href="#">4</a>
				<a href="#">5</a>
				<p>文本阴影效果</p>
				</div>
				<h1>文本溢出换行</h1>
				 <div>
					 <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta exercitationem odit fugiat sapiente quam? Voluptatibus, sapiente quos? At, tenetur itaque? Nesciunt eligendi ducimus neque ad. Aliquid velit asperiores adipisci a.
				 </span>
				 </div>
	</body>
</html>